Skip to main content

Text Field Component

1. Introduction​

The Text Field component is a versatile input field designed to handle text input that exceeds the length of a standard input field, with a character limit of 256 characters. This component supports WYSIWYG (What You See Is What You Get) styling, allowing users to format text directly within the field. It is ideal for collecting longer text inputs, such as comments, descriptions, or feedback, while providing a customizable and user-friendly interface.

Purpose and Use Cases​

  • Purpose: The Text Field component is used to collect and display longer text inputs from users, with optional formatting capabilities.
  • Primary Use Cases:
    • Collecting user feedback or comments.
    • Capturing detailed descriptions or notes.
    • Allowing users to input formatted text in applications.

Benefits​

  • Customizable: Supports WYSIWYG styling for enhanced text formatting.
  • User-Friendly: Provides a clear and intuitive interface for entering longer text.
  • Responsive Design: Works seamlessly across desktop, tablet, and mobile devices.
  • Interactive: Includes features like reset buttons and help messages for better usability.

2. Properties​

The Text Field component comes with several configurable properties to suit different use cases. Below is a detailed breakdown:

Code​

  • Description: A unique identifier for the component.
  • Purpose: Used to reference the component programmatically.
  • Required/Optional: Required

Label​

  • Description: The text label displayed above or next to the text field.
  • Purpose: Provides context for the user about the purpose of the text field.
  • Required/Optional: Optional

Answer​

  • Description: The text input provided by the user.
  • Purpose: Stores the user's response or input.
  • Sub-Property:
    • Reset Button: Resets the answer to a blank state.
  • Required/Optional: Optional

Mandatory Field​

  • Description: Specifies whether the text field is required to be filled.
  • Purpose: Ensures that users provide input before proceeding.
  • Default: OFF
  • Required/Optional: Optional

Help​

  • Description: Displays a help message for the text field.
  • Purpose: Provides additional guidance or context for the user.
  • Default: OFF
  • Sub-Property:
    • Help Message: A textbox to input help text concerning the component.
  • Required/Optional: Optional

Enabled​

  • Description: Determines whether the text field is active or disabled.
  • Purpose: Controls the availability of the text field to users.
  • Default: ON
  • Required/Optional: Optional

3. Style​

The Text Field component offers extensive styling options to ensure it aligns with the application's design. Below are the key styling properties:

Size and Position​

  • Reset: Resets size and position settings to default.
  • Size:
    • Width & Height: Define the dimensions of the text field.
    • Min Size: Minimum width and height (default: none).
    • Max Size: Maximum width and height (default: none).
  • Position:
    • Alignment: Left, right, top, bottom (default: left, top).
    • X Position: Horizontal offset from the edge.
    • Y Position: Vertical offset from the edge.
  • Z-Index: Specifies the stack order of the text field (default: 0).
  • Fixed Position: Locks the text field's position on the screen (default: OFF).
  • Hidden: Hides the text field from view (default: OFF).

Border​

  • Reset: Resets border settings to default.
  • Options: Normal, On Hover.
    • Edges: Left, right, top, bottom, or all edges.
    • Type: None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit (default: none).
    • Color: Hexadecimal color code with a color picker.
    • Width: Border width in pixels.
    • Radius: Corner radius for rounded edges (default: none).

Padding​

  • Reset: Resets padding settings to default.
  • Options: Normal, On Hover.
    • Sides: Left, right, top, bottom, or all edges.
    • Size: Padding size in pixels.

Background​

  • Reset: Resets background settings to default.
  • Normal:
    • Background Color: Hexadecimal color code with a color picker (default: none).
    • Source: Media library or HTTP URL.
    • Attachment: Scroll, fixed, local, initial, inherit.
    • Position: X and Y positions in pixels (default: 0).
    • Repeat: Repeat, repeat-x, repeat-y, no-repeat, initial, inherit.
    • Size: Auto, length, cover, contain, initial, inherit.
    • Origin: Border-box, padding-box, content-box, initial, inherit.
  • On Hover:
    • Same properties as "Normal" but applied when the text field is hovered.

Label Font​

  • Reset: Resets label font settings to default.
  • Options: Normal, On Hover, On Focus.
    • Font Size: Pixels (default: 14).
    • Letter Spacing: Number expressed in em, px, or rem units.
    • Word Spacing: Number expressed in em, px, or rem units.
    • Line Height: Number expressed in em, px, or rem units.
    • Weight: Thin, light, extra light, normal, medium, semi-bold, bold, extra bold, black (default: normal).
    • Color: Hexadecimal color code with a color picker (default: none).

Answer Font​

  • Reset: Resets answer font settings to default.
  • Options: Normal, On Hover, On Focus.
    • Font Size: Pixels (default: 14).
    • Letter Spacing: Number expressed in em, px, or rem units.
    • Word Spacing: Number expressed in em, px, or rem units.
    • Line Height: Number expressed in em, px, or rem units.
    • Weight: Thin, light, extra light, normal, medium, semi-bold, bold, extra bold, black (default: normal).
    • Color: Hexadecimal color code with a color picker (default: none).

Input Field Border​

  • Reset: Resets input field border settings to default.
  • Options: Normal, On Hover, On Focus.
    • Edges: Left, right, top, bottom, or all edges.
    • Type: None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit (default: none).
    • Color: Hexadecimal color code with a color picker.
    • Width: Border width in pixels.
    • Radius: Corner radius for rounded edges (default: none).

Input Field Background​

  • Options: Normal, On Hover, On Focus.
    • Color: Hexadecimal color code with a color picker.

4. Actions​

The Text Field component supports the following action:

  • On Change: Triggers an event when the text in the field is modified.

5. Best Practices for UI/UX​

When and Why to Use​

  • Use the Text Field component to collect longer text inputs, such as comments or descriptions.
  • Ideal for applications requiring formatted text input.

Effective Scenarios​

  • Desktop: Use for detailed text input fields, such as feedback forms or content editors.
  • Tablet/Smartphone: Ensure the text field is responsive and easy to interact with on smaller screens.

Tips for Optimal Use​

  • Use clear and concise labels to indicate the purpose of the text field.
  • Provide help messages for additional guidance or context.
  • Ensure the text field's size and styling match the application's overall design.

6. Security Considerations​

Potential Risks​

  • Input Validation: Ensure that user input is validated to prevent injection attacks.
  • External Resources: Validate any external resources used for backgrounds or media.

Best Practices​

  • Use input sanitization to prevent malicious code injection.
  • Limit the maximum character count to avoid performance issues.
  • Test the text field's responsiveness and behavior across different devices and screen sizes.